<template>
  <div>
    <el-card class="edit-card"
             shadow="never">
      <div slot="header"
           class="flex justify-between items-center">
        <span class="title">Shared KPIs</span>
        <div class="add"
             @click="handleAdd"
             v-if="showEdit">
          <el-button type="primary"
                     icon="el-icon-circle-plus"
                     circle
                     plain
                     class="add_btn"></el-button>
          <div class="add_label">
            Add
          </div>
        </div>
      </div>
      <div class="edit-card-content"
           v-loading="loading">
        <draggable  @end="onEnd"
                  :options="{ disabled: !showEdit }"
                   filter=".icon_delete"
                   v-model="KPIList"
                   chosenClass="chosen"
                   animation="1000">
            <transition-group>
              <KpiItem v-for="item in KPIList"
                     :key="item.id"
                     :class="showEdit?'mover':''"
                     @handleDelete="handleDelete"
                     :item="item"
                     :showDelete="showEdit" />
            </transition-group>
          </draggable>
      </div>
    </el-card>
    <BDashboardAddWidget v-model="list"
                         v-if="visibleAdd"
                         :internalWidget="businessTypeForWidget === 'MSPbots Internal'"
                         :internalSlicer="false"
                         :tab="'widget'"
                         @peergroupSave="peergroupSave"
                         :widget="businessTypeForWidget !== 'MSPbots Internal'"
                         :slicer="false"
                         :rootBusinessType="businessTypeForWidget"
                         :visible.sync="visibleAdd" />
  </div>
</template>

<script>
import BDashboardAddWidget from "@/components/storybook/b-dashboard-add-widget/index";
import KpiItem from "./kpiItem.vue";
import draggable from "vuedraggable";
export default {
  name: 'editBenchmark',
  components: {
    BDashboardAddWidget,
    KpiItem,
    draggable
  },
  props: ['showEdit'],
  provide () {
    return {
      dataFrom: "peergroup",
    };
  },
  data () {
    return {
      businessTypeForWidget: "Custom",
      visibleAdd: false,
      loading: false,
      KPIList: [],
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.KPIList = []
      this.loading = true
      const params = {
        groupId: this.$route.query.groupId
      }
      const { data: res } = await this.$interface.system.benchmarkList(params)
      this.loading = false
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.KPIList = res.data ? res.data.map(v => {
        return {
          i: v.gadgetId,
          id: v.modelId,
          myId: v.id,
          name: v.name,
          com: v.gadgetType,
          description: v.description,
          status: v.status
        }
      }) : []
      this.list = [...this.KPIList]
    },
    handleAdd () {
      this.visibleAdd = true
    },
    async handleDelete (id) {
      const btn = await this.$msgbox({
        title: this.$t("prompt.title"),
        message: "Please double confirm if you want to delete?",
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        showCancelButton: true,
        type: "warning",
      })
      if (btn !== 'confirm') {
        return
      }
      const params = {
        id
      }
      const { data: res } = await this.$interface.system.benchmarkDelete(params)
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.getData()
    },
    async peergroupSave () {
      const params = {
        groupId: this.$route.query.groupId,
        list: this.list.map((v,index) => {
          return {
            modelId: v.id,
            sort:index
          }
        })
      }
      const { data: res } = await this.$interface.system.benchmarkAdd(params)
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.getData()
    },
    onEnd (event) {
      if(event.oldIndex !== event.newIndex) {
        this.list = [...this.KPIList]
        this.peergroupSave()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.edit-card {
  margin-top: 15px;
  ::v-deep .el-card__body {
    padding: 0;
  }
}
.edit-card-content {
  padding: 20px;
  max-height: 300px;
  overflow-y: overlay;
}
.title {
  font-weight: bold;
}
.add {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  color: #17b3a3;
  &_btn {
    font-size: 20px;
    padding: 0 !important;
    border: none;
    margin-right: 10px;
  }
}
.icon {
  float: right;
  font-size: 20px;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
}
.chosen {
  // border: solid 2px #3089dc !important;
  background: transparent!important;
}
.mover {
  // padding: 6px;
  // background-color: #fdfdfd;
  // border: solid 1px #eee;
  // margin-bottom: 10px;
  cursor: move;
  // width: 343px;
}
</style>
